<template>
  <div
    class="announcementComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }"
  >
    <div class="wrapper" :style="{
      paddingTop: oItem.main.paddingTop + 'px',
      paddingBottom: oItem.main.paddingBottom + 'px',
      paddingLeft: oItem.main.paddingLR + 'px',
      paddingRight: oItem.main.paddingLR + 'px',
      backgroundColor: oItem.main.wrapperBgColor||'transparent',
      backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',

      borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
      borderTopRightRadius: oItem.main.wrapperBTR + 'px',
      borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
      borderBottomRightRadius: oItem.main.wrapperBBR + 'px',
    }">
      <div
        class="content"
        :style="{
          borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
          borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
          borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
          backgroundColor: oItem.main.bgColor||'transparent',
          backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none'
        }"
      >
        <div class="left" v-if="oItem.main.leftIcon">
          <i
            v-if="oItem.main.leftIcon.indexOf('icon-') > -1"
            :class="oItem.main.leftIcon"
            :style="{ color: oItem.main.leftIconColor||'transparent' }"
          ></i>
          <img
            v-if="oItem.main.leftIcon.indexOf('http') > -1"
            :src="oItem.main.leftIcon"
          />
        </div>
        <div
          class="body"
          :style="{
            width: oItem.main.leftIcon
              ? 'calc(100% - 70px)'
              : 'calc(100% - 30px)',
          }"
        >
          <el-carousel
            height="50px"
            direction="vertical"
            :autoplay="true"
            :interval="oItem.main.getNums * 1000"
            indicator-position="none"
          >
            <el-carousel-item v-for="oml in oItem.main.list" :key="oml.id">
              <p
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  overflow: hidden;
                  font-size: 12px;
                "
                :style="{
                  color: oItem.main.wordFontColor||'transparent',
                  paddingLeft: oItem.main.leftIcon ? 0 : 10 + 'px',
                }"
              >
                <a :href="oml.linkUrl" v-if="oml.linkUrl">{{ oml.name }}</a>
                <span v-if="!oml.linkUrl">{{ oml.name }}</span>
              </p>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <i :class="oItem.main.rightIcon" :style="{color: oItem.main.rightIconColor}"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "announcementComponent",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("announcementComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.announcementComponent {
  .wrapper{
    display: flex;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    overflow: hidden;
  }
  .content {width:100%;
    display: flex;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    overflow: hidden;
    .left {
      box-sizing: border-box;
      width: 40px;
      display: flex;
      justify-content: center;
      img {
        max-width: 30px;
        height: 24px;
      }
      i {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }
    .body {
      width: calc(100% - 70px);
    }
    .right {
      width: 30px;
      display: flex;
      justify-content: center;
      i {
        font-size: 12px;
        color: #ccc;
      }
    }
  }
}
</style>